<template>
  <div id="app">
    <div class="Navbar">
      <div>
        <img src="./assets/image/img_logo.png" alt="">
      </div>
      <div v-for="(item,i) in nav" :key="i" @click="get(i)" :id="span === i ? 'active1':''">
        <router-link :to="item.url">{{item.span}}</router-link>
      </div>
      <div>
        <a href="https://xc.api.zoeeasy.com/#/">
          <button class="buttonTena">商户平台</button>
        </a>
      </div>
    </div>
    <router-view/>
    <tableTail></tableTail>
    <div class="fix">
      <div v-if="message">
        <div class="title">
          <span>请您留言</span>
          <span @click="show(1)">一</span>
        </div>
        <form>
          <div class="bigInput">
            <textarea type="text" v-model="input1" maxlength="100" placeholder="请在此输入留言内容，我们会尽快与您联系。（必填）" />
          </div>
          <div class="detailed">
            <img src="./assets/image/姓名.svg" alt="">
            <img src="./assets/image/电话.svg" alt="">
            <img src="./assets/image/邮箱.svg" alt="">
            <img src="./assets/image/地址.svg" alt="">
            <input type="text" v-model="input2" placeholder="姓名">
            <input type="text" v-model="input3" placeholder="电话(必填)">
            <input type="text" v-model="input4" placeholder="邮箱">
            <input type="text" v-model="input5" placeholder="地址">
          </div>
        </form>
        <div class="bottom">
          <button>发送</button>
        </div>
      </div>
      <div v-else>
        <div class="title">
          <span>请您留言</span>
          <span @click="show(2)">口</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import tableTail from "./components/tableTail.vue"

export default {
  data() {
    return {
      input1: undefined,
      input2: undefined,
      input3: undefined,
      input4: undefined,
      input5: undefined,
      message: true,
      span: undefined,
      nav: [
        {url: '/', span: '首页'},
        {url: '/Solution', span: '解决方案'},
        {url: '/Product_Center', span: '产品中心'},
        {url: '/News_Information', span: '新闻资讯'},
        {url: '/Case', span: '案例'},
        {url: '/Cooperation', span: '合作'},
        {url: '/Weee', span: '我们'},
      ]
    }
  },
  components: {tableTail},
  methods: {
    show(res) {
      res === 2 ? this.message = true : this.message = false
    },
    // 切换样式
    get(res) {
      this.span = res
    }
  },
  created() {
  }
}
</script>
<style lang="scss" scoped>
.fix {
  position: fixed;
  width: 350px;
  left: 0px;
  top: 250px;
  // display: none;

  > div {
    box-shadow: 0 0 10px #000;

    > form {
      width: 350px;
      height: 368.7px;
      padding: 10px 14px 10px 15px;
      background: #EEEEEE;

      .detailed {
        position: relative;
        > input {
          margin-bottom: 10px;
          width: 321px;
          height: 47px;
          border: 1px solid #dcdfe6;
          box-sizing: border-box;
          padding-left: 52px;
        }

        > img {
          position: absolute;
          width: 22px;
          left: 13px;
        }

        > img:nth-child(1) {
          top: 11.75px;
        }

        > img:nth-child(2) {
          top: 68.75px;
        }

        > img:nth-child(3) {
          top: 129.75px;
        }

        > img:nth-child(4) {
          top: 182.75px;
        }
      } 
      
      .bigInput > textarea {
        box-sizing: border-box;
        font-size: 16px;
        padding: 12px;
        width: 321px;
        height: 120px;
        resize: none;
        border: 1px solid #dcdfe6;
        margin-bottom: 10px;
      }
    }

    > .bottom {
      text-align: center;
      line-height: 40.9px;
      background-color: #3296FA;
      > button {
        background-color: #3296FA;
        font-size: 20px;
        color: #FFFFFF;
        border: none;
        width: 100%;
      }
    }
    
    > .title {
      height: 40.9px;
      padding: 10px 0px 12px 17px;
      background-color: #3296FA;
      color: #FFFFFF;
      font-size: 20px;
      text-align: center;

      > span:nth-child(1) {
        margin-right: 202px;
      }

      > span:nth-child(2) {
        width: 24px;
        height: 24px;
        border: 1px solid transparent;
      }

      > span:nth-child(2):hover {
        cursor: pointer;
        border: 1px solid hsla(0, 0%, 100%, .3);
        box-shadow: 0 0 10px #fff;
      }

      > span::selection {
        background-color: transparent;
      }
    }
  }
  
}
#active1 {
  a {
    color: #3296FA;
    border-bottom: 4px solid #3296FA;
    box-sizing: border-box;
  }
}
.Navbar {
  position: fixed;
  top: 0px;
  width: 100%;
  height: 81px;
  min-width: 1550px;
  background-color: #fff;
  line-height: 81px;
  text-align: center;
  z-index: 1;
  > div {
    display: inline-block;

    > img {
      margin: 0px 183px 0px 0px;
    }

    > a {
      margin-right: 40px;
      padding-bottom: 10px;
      color: #909399;
      font-size: 20px;
      outline: none;
    }
  }
}
.buttonTena {
  width: 110px;
  height: 40px;
  border: none;
  color: #ffffff;
  font-size: 18px;
  border-radius: 2px;
  background-color: #46A0FA;
}

</style>
